<template>
  <Layout :gradient = "true">
    <Header>
      <Icon name = 'arrow-left' slot = 'left' @click="handleBack" />
    </Header>
    <Content :flex="true">
      <Banner class='banner' />

      <div class="pay-content">
        <div class="focus">
          <h2>第二届中国医师协会神经介入年会</h2>
          <div class="focus-extra">
            <Icon name = 'clock' /><span>2018年08月28-12日</span>
          </div>
          <div class="focus-extra">
            <Icon name = 'location' /><span>广州南丰朗豪酒店</span>
          </div>
        </div>

        <div class="list">
          <div class="list-item">
            <div class="list-item-title">参会人</div>
            <div class="list-item-content">李某某</div>
          </div>
          <div class="list-item">
            <div class="list-item-title">联系手机</div>
            <div class="list-item-content">12345678900</div>
          </div>
          <div class="list-item">
            <div class="list-item-title">所在地区</div>
            <div class="list-item-content">中国上海市虹桥区</div>
          </div>
          <div class="list-item list-item-right">
            <div class="list-item-content">
              会议费用：<span class="money"><em>￥</em>3000<em>.00</em></span>
            </div>
          </div>
        </div>

        <div class="list">
          <div class="list-item">
            <div class="list-item-title"><LocalIcon type = 'jiudian' />酒店</div>
            <div class="list-item-content">
              <span class="money"><em>￥</em>3000<em>.00</em></span>
            </div>
          </div>
        </div>

        <div class="list">
          <div class="list-item">
            <div class="list-item-title"><LocalIcon type = 'jiesongji' />交通</div>
            <div class="list-item-content">
              <span class="money"><em>￥</em>3000<em>.00</em></span>
            </div>
          </div>
        </div>

        <div class="tip">注：如果要更改报名信息，请到个人中心里修改。</div>
      </div>
    </Content>
    <Footer>
      <div class="toolbar">
        <div class="toolbar-display">
          <div class="toolbar-display-title">合计费用</div>
          <div class="toolbar-display-value"><sub>￥</sub>900<sub>.00</sub></div>
        </div>
        <div class="toolbar-pay" :disabled="isSign" @click="handlePay"><span>{{ isSign ? '已报名成功' : '去支付' }}</span></div>
      </div>
    </Footer>
  </Layout>
</template>

<script>

import Layout from '@/component/layout/index.js'
import { Icon, Toast } from 'vant'
import Banner from '@/component/banner/index.vue'
// import Icon '@/component/icon/index.vue'

const {
  Header,
  Content,
  Footer
} = Layout

export default {

  name: 'index',

  data () {
    return {
      // 是否已报名
      isSign: false
    }
  },

  methods: {
    handleBack: function (e) {
      this.$router.go(-1)
    },
    handlePay: function (e) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        loadingType: 'spinner',

        message: '支付中'
      })

      setTimeout(() => {
        toast.clear()
        Toast.success('支付成功')

        this.isSign = true
      }, 1000)
    }
  },

  components: {
    Layout,
    Header,
    Content,
    Footer,
    Icon,
    LocalIcon: require('@/component/icon/index.vue').default,
    Banner,
  }
}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.banner {
  height: 193px;
  border-radius: 3px;
  margin: 0 6px 6px;
  flex-shrink: 0;
}

.pay-content {
  color: #262626;
  background-color: #f4f6f8;
  flex-grow: 1;
}

.focus {
  background-color: #fff;
  margin-bottom: 6px;
  padding: 15px;

  h2 {
    margin: 0 0 8px;
    line-height: 1.2;
    font-size: 15px;
  }

  &-extra {
    font-size: 13px;
    margin-bottom: 5px;
    color: #737373;
    display: flex;

    &:last-child {
      margin-bottom: 0;
    }

    i {
      color: #A2A2A2;
      margin-right: 5px;
      flex-shrink: 0;
      margin-top: 3px;
    }

    span {
      flex-grow: 1;
    }
  }
}

.list {
  background-color: #fff;
  margin: 6px 0;

  &-item {
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-width: 0;

    .hairline(bottom, #EEF0F3);

    &:last-child {
      .hairline-remove(bottom);
    }

    &-title {
      font-size: 13px;
      color: #A2A2A2;
      width: 80px;
      flex-shrink: 0;
      margin-right: 10px;

      .text-overflow();

      i {
        margin-right: 5px;
      }
    }

    &-content {
      flex-grow: 1;
      font-size: 13px;
      color: #262626;

      .text-overflow();
    }

    &-right {
      .list-item-content {
        text-align: right;
        color: #A2A2A2;
        font-size: 11px;

        .money {
          margin-left: 3px;
        }
      } 
    }
  }
}

.money {
  font-size: 18px;
  color: #FF6633;

  em {
    vertical-align: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
  }
}

.tip {
  color: #A2A2A2;
  font-size: 12px;
  text-align: center;
  margin: 20px 0;
}

.toolbar {
  display: flex;
  position: relative;
  height: 49px;

  .hairline(top, #D3D3D3);

  &-display {
    flex-grow: 1;
    background-color: #fff;
    padding: 10px 0 0 10px;
    color: #A2A2A2;

    &-title {
      font-size: 11px;
      line-height: 1.15;
      margin-bottom: 1px;
    }

    &-value {
      font-size: 15px;
      color: #FF6633;

      sub {
        font-size: 12px;
        margin: 0;
        vertical-align: 0;
      }
    }
  }

  &-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 0 10px;
    background-color: #3BBF51;
    font-size: 16px;
    font-weight: 500;
    // letter-spacing: .2em;
    min-width: 0;
    width: 188px;
    flex-shrink: 0;
    transition: background-color .2s;

    &.active,
    &:active {
      background-color: #33a646;
    }

    span {
      display: block;

      .text-overflow();
    }

    &[disabled] {
      background-color: #ddd !important;
      color: #fff !important;
      pointer-events: none;
    }
  }
}

</style>